<!-- PPI组件 -->
<template>
  <div class="wrap">
    <div class="wrap-header">
      <span class="wrap-header-title">工作计划考核维度（PPI）</span>
      <span>维度权重：{{ props.weight }}%</span>
    </div>

    <div style="margin-bottom: 20px">
      <div class="header">
        <div style="margin-left: 10px">
          维度考核工具：工作计划考核维度（PPI）
        </div>
        <div>
          <a-button type="text">引用指标库</a-button>
          <a-button type="text">工具设置</a-button>
        </div>
      </div>
      <div>
        <a-table
          :columns="columns"
          ref="tableRef"
          :data="PpiData.data"
          :bordered="{ headerCell: true }"
          stripe
        >
          <template #optional="{ record, rowIndex }">
            <a-tooltip content="编辑">
              <icon-font
                type="icon-edit"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer'
                }"
                @click="add(record, rowIndex)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="del(record, rowIndex)"
              >
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </template>
        </a-table>
        <a-button type="text" @click="add(null)">新增指标</a-button>
      </div>
    </div>
  </div>
  <IndexDrawer
    v-model:visible="visible"
    @ppiIndexEmit="ppiIndexEmit"
    :data="currData"
    :weight="props.weight"
    :maxWeight="maxWeight"
  ></IndexDrawer>
</template>

<script lang="ts" setup>
import { DelProbationTemplateTool } from '@/apis/management/performance/baseSetting/template';
import IndexDrawer from './IndexDrawer.vue';

const props = withDefaults(
  defineProps<{
    weight?: any; // 维度权重,
  }>(),
  {}
);

const emits = defineEmits(['update:visible', 'kpiIndexEmit']);

const PpiData = reactive({
  /* 
    type: undefined, // 工作类型
    project: '', // 工作计划项目
    describe: '', // 工作项目界定、描述
    require: '', // 完成目标及时限要求
    standard: undefined, // 评分标准
    weight: '', // 指标权重
    dataSource: '', // 评分人（userid）
    upper: '', // 评分上限
    way: '', // 评分方式 0非手动 1手动
    remark: '', // 备注
    personnel: '', // 评分人是否开启0否1是
    dimensionaId: '' // 维度id
  */
  data: []
});

let currData = ref(), // 储存当前的kpi指标
  maxWeight = ref(0); // 储存当前的权重值总和

// kpi的table字段
const columns: any = reactive([
  {
    title: '序号',
    render: ({ rowIndex }: { rowIndex: number }) => rowIndex + 1,
    width: 80
  },
  {
    title: '工作类型',
    dataIndex: 'type',
    width: 100
  },
  {
    title: '工作计划项目名称',
    dataIndex: 'project',
    width: 200
  },
  {
    title: '工作项目界定/描述',
    dataIndex: 'describe',
    width: 200
  },
  {
    title: '完成目标及时限要求',
    dataIndex: 'require',
    width: 200
  },
  {
    title: '评分标准/规则',
    dataIndex: 'standard',
    width: 200
  },
  {
    title: '指标权重(%)',
    dataIndex: 'weight',
    width: 150
  },
  {
    title: '评分人',
    dataIndex: 'dataSource',
    width: 150
  },
  {
    title: '操作',
    width: 150,
    fixed: 'right',
    slotName: 'optional'
  }
]);

let visible = ref(false); // 新增kpi弹出框

let currIndex = ref(-1); //  储存当前选中kpi的行
// 新增/编辑指标
const add = (record: any, index?: number) => {
  currData.value = null;
  if (index !== undefined) currIndex.value = index;
  else currIndex.value = -1;
  if (record) currData.value = record;
  visible.value = true;
};

// 删除指标
const del = async (record: any, index: number) => {
  if (record.id) {
    await DelProbationTemplateTool({
      id: record.id,
      tool: 3
    });
    PpiData.data.splice(index, 1);
    maxWeight.value = 0;
    PpiData.data.forEach((item: any) => {
      maxWeight.value += item.weight;
    });
  } else {
    PpiData.data.splice(index, 1);
    maxWeight.value = 0;
    PpiData.data.forEach((item: any) => {
      maxWeight.value += item.weight;
    });
  }
};

// kpi弹出框自定义事件
/* 
  flag: 判断用户是否点击继续新增，继续为true，否则为false
*/
const ppiIndexEmit = (record: any, flag?: boolean) => {
  if (flag) PpiData.data.push(record);
  else {
    if (currIndex.value !== -1) PpiData.data[currIndex.value] = record;
    else PpiData.data.push(record);
    currIndex.value = -1;
  }
  maxWeight.value = 0;
  PpiData.data.forEach((item: any) => {
    maxWeight.value += item.weight;
  });
};
defineExpose({ PpiData });
</script>

<style scoped lang="less">
.wrap {
  width: 100%;
  .wrap-header {
    position: relative;
    // width: 100%;
    height: 50px;
    border-radius: 3px;
    background-color: rgb(var(--primary-10));
    line-height: 50px;
    padding: 0 10px;
    margin-bottom: 10px;
  }
  .wrap-header::before {
    display: inline-block;
    content: '';
    width: 5px;
    height: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #165dff;
  }
  .wrap-header-title {
    margin-left: 10px;
  }
  .wrap-header-title::before {
    content: '*';
    display: inline-block;
    color: red;
  }
  .header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    border-radius: 3px;
    background-color: rgb(var(--primary-10));
    line-height: 50px;
    margin-bottom: 10px;
  }
  :deep(.arco-form-item-label-required-symbol) {
    position: relative;
    top: 35px;
  }
}
</style>
